{extend name='base' /}

{block name='title'}借阅图书{block}

{block name='main'}
<link rel="stylesheet" href="__CSS__/booklist.css">
<style>
    .main {
        background: url("__IMG__/list_bg.jpg") left top repeat-y;
    }
    .borrow-form{
        width: 60%;
        font-size: .9rem;
    }
    .borrow-form input{
        font-size: .9rem;
    }
    .borrow-form .text_con {
        height: 38px;
        margin-bottom: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 18px !important;
    }
</style>
<div class="row m-0 mt-3 main mb-3">
    <div class="left">
        <div class="left_nav">
            {foreach $category as $k => $v}
            <div class="first_level">
                <a class="card-link" href="{:url('category/index', array('catid' => $v['id']))}">
                    <h3 class="whole m-0">
                        {$v.catname}
                    </h3>
                </a>
            </div>
            {/foreach}
        </div>
    </div>
    <div class="right flex-1">
        <form class="borrow-form">
            <div class="form-group d-flex align-items-center">
                <img style="width: 100px;height: 140px;" id="avatar-preview" src="{$book.thumb}">
                <div class="flex-1 pl-2">
                    <p class="m-0 m-1"><span class="text-muted">名称：</span><span>{$book.bname}</span></p>
                    <p class="m-0 m-1"><span class="text-muted">作者：</span><span>{$book.author}</span></p>
                    <p class="m-0 m-1"><span class="text-muted">出版社：</span><span>{$book.publish}</span></p>
                    <p class="m-0 m-1"><span class="text-muted">库存：</span><span>{$book.total}</span></p>
                    <p class="m-0 text_con m-1">
                        <span class="text-muted">简介：</span>{$book.content}
                    </p>
                </div>
            </div>
            <div class="form-group">
                <label for="back">归还时间 <text class="text-danger">*</text></label>
                <input type="date" name="data[back]" class="form-control" id="back" required >
            </div>
            <input type="hidden" name="data[bookid]" value="{$book.id}">
            <button type="button" class="btn btn-primary borrow-btn">确定借阅</button>
        </form>
    </div>
</div>
{/block}

{block name="js"}
<script>
    $(function () {
        let lock  = false;
        $(".borrow-btn").on('click', function () {
            if (lock) {
                return;
            }
            lock = true;
            $.post("{:url('User/borrow')}", $('.borrow-form').serialize(), function (res) {
                console.log(res);
                if (res.code == 0) {
                    swal("提示", res.msg, {
                        icon : "error",
                        buttons: {
                            confirm: {
                                className : 'btn btn-danger'
                            }
                        },
                    });
                }else{
                    swal("提示", res.msg, {
                        icon : "success",
                        buttons: {
                            confirm: {
                                className : 'btn btn-success',
                            }
                        }
                    }).then(function () {
                        window.history.back();
                    });
                }
                lock = false;
            }, 'json');
        });
    });
</script>
{/block}